<template>
  <div class="content">
    <div class="inner-box">
      <div class="page-header">
        <h2 class="page-title">产品介绍管理</h2>
        <div class="page-action">
          <el-button-group>
            <el-button
              :type="layout == 'card' ? 'primary' : ''"
              icon="Grid"
              @click="layout = 'card'"
            >
            </el-button>
            <el-button
              :type="layout == 'table' ? 'primary' : ''"
              icon="Tickets"
              @click="layout = 'table'"
            >
            </el-button>
          </el-button-group>
          <el-button type="primary" icon="Plus" @click="handleOpen()" style="margin-left: 10px"
            >添加产品介绍
          </el-button>
        </div>
      </div>
      <el-card shadow="never">
        <div class="common-seach-wrap" :style="{ marginBottom: '10px' }">
          <el-form :inline="true" :model="query" class="demo-form-inline">
            <el-form-item label="产品名称">
              <el-input
                v-model="query.name"
                placeholder="请输入产品名称"
                :clearable="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="产品类型">
              <el-select
                v-model="query.type"
                placeholder="请选择产品类型"
                style="width: 200px"
                :clearable="true"
              >
                <el-option label="窗膜" value="窗膜" />
                <el-option label="车衣" value="车衣" />
              </el-select>
            </el-form-item>
            <el-form-item label="材质">
              <el-input
                v-model="query.material"
                placeholder="请输入材质"
                :clearable="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="推荐状态">
              <el-select
                v-model="query.is_featured"
                placeholder="请选择推荐状态"
                style="width: 200px"
                :clearable="true"
              >
                <el-option label="已推荐" value="1" />
                <el-option label="未推荐" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" @click="getTableInfo()">查询</el-button>
              <el-button type="" @click="resetQuery()">重置</el-button>
              <el-button type="info" @click="isAdvanced = !isAdvanced">{{
                isAdvanced ? "高级筛选" : "展开高级筛选"
              }}</el-button>
            </el-form-item>
          </el-form>
          <div class="advanced-search-panel" v-show="isAdvanced">
            <el-divider border-style="dashed" />
            <el-form :inline="true" :model="query" class="demo-form-inline">
              <el-form-item label="质保年限">
                <el-select
                  v-model="query.warranty_range"
                  placeholder="选择质保年限"
                  style="width: 200px"
                  :clearable="true"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in warranty_range"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="浏览次数">
                <el-select
                  v-model="query.view_count_range"
                  placeholder="选择浏览次数"
                  style="width: 200px"
                  :clearable="true"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in view_count_range"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <<el-form-item label="排序方式">
                <el-select
                  v-model="query.sort_field"
                  placeholder="选择排序方式"
                  style="width: 200px"
                  :clearable="true"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in sort_field"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="排序方向">
                <el-select
                  v-model="query.sort_order"
                  placeholder="选择排序方向"
                  style="width: 200px"
                  :clearable="true"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in sort_order"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
      <el-divider border-style="none" />
      <template v-if="layout == 'card'">
        <el-card
          shadow="hover"
          v-for="item in tableData"
          :key="item.id"
          style="border-radius: 12px; overflow: hidden; position: relative; margin-bottom: 20px"
        >
          <template v-slot:header>
            <div class="product-header">
              <div class="product-title">
                {{ item.product_name }}
                <div v-if="item.is_featured">
                  <el-tag type="danger" effect="dark">
                    <el-icon><Star /></el-icon>推荐
                  </el-tag>
                </div>
              </div>
              <div class="product-action">
                <el-button type="primary" icon="Edit" @click="handleOpen(item.id)" link
                  >编辑</el-button
                >
                <el-button type="danger" icon="Delete" @click="delInfo(item.id)" link
                  >删除</el-button
                >
                <el-button type="info" @click="showDetail(item)" link
                  >{{ item.show_detail ? "收起详情" : "展开详情"
                  }}<el-icon><ArrowUp v-if="item.show_detail" /><ArrowDown v-else /></el-icon
                ></el-button>
              </div>
              <el-tag
                :type="item.product_type == '车衣' ? 'success' : 'primary'"
                effect="dark"
                size="large"
                style="
                  position: absolute;
                  top: 0;
                  right: 0;
                  border-radius: 0 0 0 var(--el-tag-border-radius);
                "
                >{{ item.product_type }}</el-tag
              >
            </div>
          </template>
          <div class="main-image" v-if="!item.show_detail">
            <el-image
              :src="item.main_image"
              fit="cover"
              style="width: 100%; height: 100%"
            ></el-image>
          </div>
          <div class="product-detail" v-else>
            <el-row :gutter="20">
              <el-col :span="10">
                <div class="main-image">
                  <el-image
                    :src="item.main_image"
                    fit="cover"
                    style="width: 100%; height: 100%"
                  ></el-image>
                </div>
              </el-col>
              <el-col :span="14">
                <el-card header="基本信息" style="margin-bottom: 10px">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <div class="info-card">
                        <div class="card-label">材质</div>
                        <div class="card-value">{{ item.material }}</div>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="info-card">
                        <div class="card-label">厚度</div>
                        <div class="card-value">{{ item.thickness }}mm</div>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="info-card">
                        <div class="card-label">质保平均年限</div>
                        <div class="card-value">{{ item.warranty_years }}年</div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20" style="margin-top: 10px">
                    <el-col :span="8">
                      <div class="info-card">
                        <div class="card-label">价格</div>
                        <div class="card-value">
                          <b style="color: red">{{ item.price_range }}</b>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
                <el-card header="产品简介" style="margin-bottom: 10px">
                  {{ item.short_description }}
                </el-card>
                <el-card header="主要特点">
                  <el-tag
                    style="margin-right: 5px"
                    v-for="(v, index) in item.main_features"
                    :key="index"
                    type="primary"
                    effect="light"
                    size="small"
                    >{{ v }}</el-tag
                  >
                </el-card>
              </el-col>
            </el-row>
            <el-divider />
            <div v-html="item.full_description"></div>
          </div>
        </el-card>
      </template>
      <el-card shadow="never" v-else>
        <el-table :data="tableData" row-key="id" height="100%" stripe>
          <el-table-column type="expand" fixed="left">
            <template #default="{ row }">
              <div class="product-expand">
                <div class="expand-row" v-if="row.main_features.length">
                  <div class="label">主要特点：</div>
                  <div class="content">
                    <el-tag
                      style="margin-right: 5px"
                      v-for="(v, index) in row.main_features"
                      :key="index"
                      type="primary"
                      effect="light"
                      size="small"
                      >{{ v }}</el-tag
                    >
                  </div>
                </div>
                <div class="expand-row" v-if="row.color_options.length">
                  <div class="label">颜色选项：</div>
                  <div class="content">
                    <el-tag
                      style="margin-right: 5px"
                      v-for="(v, index) in row.color_options"
                      :key="index"
                      type="primary"
                      effect="plain"
                      size="small"
                      >{{ v }}</el-tag
                    >
                  </div>
                </div>
                <div class="expand-row" v-if="row.tech_specs.length">
                  <div class="label">技术规格：</div>
                  <div class="content">
                    <el-tag
                      style="margin-right: 5px"
                      v-for="(v, index) in row.tech_specs"
                      :key="index"
                      type="info"
                      effect="light"
                      size="small"
                      >{{ v }}</el-tag
                    >
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="product_name" label="产品名称" fixed="left" />
          <el-table-column prop="product_type" label="产品类型" />
          <el-table-column prop="short_description" label="简介" />
          <el-table-column prop="material" label="材质" />
          <el-table-column prop="thickness" label="厚度（mm）" />
          <el-table-column prop="" label="质保">
            <template #default="scope"> {{ scope.row.warranty_years }}年 </template>
          </el-table-column>
          <el-table-column prop="" label="价格" sortable>
            <template #default="scope">
              <el-text color="red">{{ scope.row.price_range }}</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="" label="推荐">
            <template #default="scope">
              <el-tag v-if="scope.row.is_featured" type="danger">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="view_count" label="浏览" sortable></el-table-column>
          <el-table-column prop="create_time" label="创建时间" sortable></el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button type="primary" link icon="Edit" @click="handleOpen(scope.row.id)">
                编辑
              </el-button>
              <el-button type="danger" link icon="DeleteFilled" @click="delInfo(scope.row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider border-style="none" />
      </el-card>
      <el-divider border-style="none" />
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="curPage"
        :page-size="pageSize"
        layout="total, sizes,prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <Drawer ref="examineDraw" @getTable="getTableInfo" :category="categoryOption" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import Drawer from "./component/dialogForm.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { deleteApi, getInfoListAPi } from "@/api/carfilm/product_info";
const layout = ref("card");
const examineDraw = ref<any>(null);
const query = reactive({
  name: "",
  type: "",
  material: "",
  is_featured: "",
  warranty_range: "",
  view_count_range: "",
  sort_field: "",
  sort_order: "",
});
const warranty_range = ref([
  { label: "一年以下", value: "0-1" },
  { label: "1-3年", value: "1-3" },
  { label: "3-5年", value: "3-5" },
  { label: "5-10年", value: "5-10" },
  { label: "10年以上", value: "10+" },
]);
const view_count_range = ref([
  { label: "100次一下", value: "0-100" },
  { label: "100-500次", value: "100-500" },
  { label: "500-1000次", value: "500-1000" },
  { label: "1000次以上", value: "1000+" },
]);
const sort_field = ref([
  { label: "创建时间", value: "create_time" },
  { label: "更新时间", value: "update_time" },
  { label: "浏览次数", value: "view_count" },
]);
const sort_order = ref([
  { label: "升序", value: "asc" },
  { label: "降序", value: "desc" },
]);
const total = ref(0);
const curPage = ref(1);
const pageSize = ref(20);
const categoryOption = ref<any[]>([]);
const tableData = ref<any[]>([]);
const isAdvanced = ref(false);
onMounted(() => {
  getTableInfo();
});
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getTableInfo();
};
const handleCurrentChange = (val: number) => {
  curPage.value = val;
  getTableInfo();
};
const resetQuery = () => {
  query.name = "";
  query.type = "";
  query.material = "";
  query.is_featured = "";
  getTableInfo();
};
function getTableInfo() {
  getInfoListAPi({
    page: curPage.value,
    limit: pageSize.value,
    ...query,
  }).then((res: any) => {
    tableData.value = res.data.list;
    total.value = res.data.total;
  });
}
const showDetail = (row: any) => {
  row.show_detail = row.show_detail ? false : true;
};
function delInfo(id: number) {
  ElMessageBox.confirm("确认要删除此此产品介绍吗?", "警告！", {
    confirmButtonText: "确认删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteApi(id).then((res: any) => {
        getTableInfo();

        ElMessage({
          type: "success",
          message: "删除成功！",
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除已取消",
      });
    });
}

// 打开添加数据窗口
const emits = defineEmits(["openForm", "search"]);
function handleOpen(id?: number) {
  examineDraw.value.dialogOpen(id || 0);
}
</script>

<style lang="scss">
.el-tabs {
  .el-tabs__new-tab {
    width: auto !important;
  }
}
.table-box {
  height: calc(100% - 200px);
}
.inner-box {
  padding: 20px;
  height: 100%;
  background-color: #f5f7fa;
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .page-title {
      margin: 0;
      color: #333;
      font-size: 24px;
    }
  }
}
.product-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .product-title {
    margin: 0;
    font-size: 22px;
    color: #333;
    font-weight: 600;
  }
}
.main-image {
  width: 100%;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
  transition: width 0.4s ease;
}
.info-card {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 6px;
  .card-label {
    font-size: 12px;
    color: #909399;
    margin-bottom: 5px;
    margin-bottom: 10px;
  }
}
.product-expand {
  padding: 10px 20px;
  background-color: #fafafa;
  border-radius: 4px;
  .expand-row {
    display: flex;
    margin-bottom: 10px;
    .label {
      font-weight: bold;
    }
    .content {
      margin-left: 20px;
    }
  }
}
.el-pagination {
  justify-content: center !important;
}
</style>
